<template>
  <div class="home container">
    <div class="web_title text_ctr">智读科研文献助手</div>
    <div class="up_load_box">
      <el-upload
        class="upload-demo"
        drag
        action="https://jsonplaceholder.typicode.com/posts/"
        multiple>
        <div class="upload_inner_box flex flex_col jc_ctr align_items_ctr">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </div>
        <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
      </el-upload>
    </div>
    <div class="home_navs flex">
      <div :class="['home_nav pointer', currentIndex === index ? 'active_nav fw' : '']" v-for="(item, index) in navs"
        :key="index" @click="navClick(item, index)">{{ item.label }}</div>
    </div>
    <div class="file_list flex">
      <div class="file_item" v-for="(item, index) in fileList" :key="index">
        <div class="file_cover flex">
          <img src="@/assets/imgs/pdf.png" alt="">
        </div>
        <div class="file_name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentIndex: 0,
      navs: [
        { label: '全部' },
        { label: '项目1' },
        { label: '项目2' },
        { label: '项目3' },
      ],
      fileList: [
        { name: 'xxxx.pdf' },
        { name: 'xxxx.pdf' },
        { name: 'xxxx.pdf' },
        { name: 'xxxx.pdf' },
        { name: 'xxxx.pdf' },
      ]
    }
  },
  methods: {
    navClick (item, index) {
      this.currentIndex = index
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  .web_title {
    font-weight: bold;
    font-size: 32px;
    line-height: 3;
  }

  .up_load_box {
    /deep/.el-upload {
      display: block !important;

      .el-upload-dragger {
        width: auto !important;
        height: 300px;

        .upload_inner_box {
          height: 100%;

          i {
            margin: 0;
            margin-bottom: 10px;
          }
        }
      }
    }

  }

  .home_navs {
    margin: 20px 0;

    .home_nav {
      width: 100px;
      height: 30px;
      line-height: 30px;
      border-radius: 10px;
      border: 1px solid var(--bgcThemeColor);
      color: var(--bgcThemeColor);
      text-align: center;
      margin-right: 10px;
    }

    .active_nav {
      background: var(--bgcThemeColor);
      color: #fff;
    }
  }

  .file_list {
    .file_item {
      width: calc((100% - 4 * 20px) / 5);
      margin-right: 20px;
      position: relative;
      border: 1px solid var(--bgcThemeColor);
      border-radius: 20px;
      overflow: hidden;
      &:nth-of-type(5n) {
        margin-right: 0;
      }

      .file_cover {
        height: 200px;

        >img {
          max-width: 100%;
          max-height: 100%;
          margin: auto;
        }
      }

      .file_name {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        line-height: 2;
        background: var(--bgcThemeColor);
        padding: 0 10px;
        color: #fff;
      }
    }
  }
}
</style>